<template>
  <div class="sti-ffWoodCategory-container">
    <div class="sti-ffWoodCategory-chart" id="sti-ffWoodCategory-chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'components-stiffWoodCategory',
  props: ['dataValue'],
  data() {
    return {
      categoryData: {},
      arrCategoryData: []
    }
  },
  methods: {
    getData() {
      this.setOption()
    },
    setOption() {
      let myChart = echarts.init(document.getElementById('sti-ffWoodCategory-chart'));
      let legendData = [],
          data = [],
          label = [];

      for (let i in this.categoryData) {
          this.arrCategoryData.push({
            name: i,
            value: this.categoryData[i]
          })
          legendData.push({
            name: i,
            icon: 'circle'
          })
          data.push(this.categoryData[i])
          label.push(i)
      }
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 15,
          top: 'middle',
          data: legendData,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 10,
          itemHeight: 10,
          formatter: function(name) {
            let sum = 0,
                index = 0;
            data.map(d => {
              sum += d;
            })
            label.forEach((value, i) => {
              if (value == name) {
                  index = i;
              }
            })
           return name + ' - ' + (data[index] / sum * 100).toFixed(2) + '%'
          }
        },
        series: [
          {
            name: '僵木蠕毒类型分布',
            type: 'pie',
            radius: ['32%', '62%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.arrCategoryData
          }
        ],
        color: ['#00E1D6', '#00918A', '#FF528A', '#FFCB81', '#148BFF']
      }
      myChart.setOption(option)
      myChart.resize()
    }
  },
  mounted() {
    this.getData()
  },
  created() {
    this.categoryData = this.dataValue
  }
}
</script>

<style lang="less">
.sti-ffWoodCategory-container {
  width: 100%;
  height: 100%;
  .sti-ffWoodCategory-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
